<!--
 * @Author: 杨湲 yy7072@qq.com
 * @Date: 2025-09-17 15:41:16
 * @LastEditors: 杨湲 yy7072@qq.com
 * @LastEditTime: 2025-10-07 10:56:42
 * @FilePath: \city\src\pages\components(1)\Bottom3.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom3" style="height: 150px ;padding: 30px;"></div>
    </div>
</template>
<script>
import Title from './Title.vue';// 引入自定义标题组件
import { Rose } from '@antv/g2plot'; // 引入G2Plot的玫瑰图组件
import { get } from '@/utils/request';// 引入HTTP请求工具（调用后端接口）
import moment from 'moment';// 引入时间格式化工具（处理时间戳）
import { mapState } from 'vuex';// 引入Vuex辅助函数（获取全局状态）
export default {
    data() {
        return {
            title: '风速',
             params: { // 接口请求参数（用于筛选设备数据）
                page: 1,
                pageSize: 200
            },
            fData:[],// 存储处理后的图表数据（最终传给玫瑰图）
            rose:null// 存储玫瑰图实例（便于后续动态更新数据）
        }
    },
    computed: {
        ...mapState(['ed'])// 将Vuex中的`ed`状态映射为组件的计算属性
    },
     watch: {
        ed: {
            handler(n, o) {
                // 根据设备信息重新查询数据 重新渲染图表 
                this.params.engineer_id = n.engineer_id;// 绑定工程ID
                this.params.device_id = n.device_id;// 绑定设备ID
                this.getFData();
                // 根据最新获取的数据重新渲染图表 
                this.rose.changeData(this.fData);
            },
            // 深度监听 
            deep: true
        }
    },
    methods: {
        loadRose() {
            // 1. 创建玫瑰图实例，绑定容器和配置
            this.rose = new Rose(this.$refs.bottom3, {
                data:this.fData, // 数据源（处理后的fData）
                xField: 'insert_time',
                yField: 'noise',
                autoFit: true, // 自动适配容器宽度（高度固定为150px）
                seriesField: null,// 无分组字段（玫瑰图不进行多系列分组）
                radius: 1,// 玫瑰图半径占容器的比例（1表示满占，0~1之间）
                color:'blue',// 玫瑰图填充色（统一为蓝色）
                xAxis:{
                    label:{
                        style:{
                            fill:'red',
                            fontSize:10
                        }
                    }
                },
                label: { // 玫瑰图数据标签配置
                    style: {
                        fill: 'red',
                        fontSize:0
                    }
                },
                legend: {// 图例配置
                    position: 'bottom',
                },
            });

            this.rose.render();

        },
        async getFData(){
            // 1. 调用后端接口，传入参数（设备ID、工程ID等）获取监测数据
            let res = await new get('/dashboard/pageQueryData',this.params);
            let temp = [];
            // 将后端获取的数据设置给tempData 
            res.data.list.forEach((item, index, arr) => {
                // item表示数组每一项 
                item.insert_time = moment(item.insert_time).format("HH:mm");
                // 由于查询数据密度密集 需要将数据处理 每隔10条数据取一条数据 
                if (index % 10 == 0) {
                    temp.push(arr[index])
                }
            });
            this.fData = temp;
        }
    },
    async mounted() {
        await this.getFData();// 等待数据获取和处理完成
        this.loadRose();// 数据就绪后，初始化并渲染玫瑰图
    }
}
</script>
<style lang="less" scoped></style>